<!-- eslint-disable vue/no-v-html -->

<script lang="ts" setup>
import { codeToHtml } from "shiki";
import { bundledThemesInfo } from "shiki/themes";

defineEmits<{
  answerAnswer: [];
}>();
const input = defineModel<string>({
  required: true,
});
const themes = bundledThemesInfo
  // 这里只获取light主题
  // .filter((item) => item.type === "light")
  .map(item => item.id);
const theme = ref(themes[0]);

const bgTheme = computedAsync(async () => {
  const targetTheme = bundledThemesInfo.find(item => item.id === theme.value);
  if (!targetTheme) {
    return "unset";
  }
  else {
    const res = await targetTheme.import();
    // console.log('res',res.default.colors?.["editor.background"]);

    return res.default.colors?.["editor.background"] ?? "unset";
  }
});
const languages = ["python", "typescript", "javascript", "java"];
const language = ref(languages[0]);

const output = computedAsync(async () => {
  return await codeToHtml(input.value, {
    lang: "typescript",
    themes: {
      light: theme.value,
      dark: "nord",
    },
  });
});
</script>

<template>
  <div class="flex justify-evenly my-2">
    <span class="w-[300px]">主题 &nbsp;
      <USelect v-model="theme" :options="themes" class="inline-block" /></span>
    <span class="max-w-[300px]">语言 &nbsp;
      <USelect v-model="language" :options="languages" class="inline-block" /></span>
  </div>
  <div
    class="min-h-40 relative w-full py-1 px-2"
    :style="{
      backgroundColor: bgTheme,
    }"
  >
    <span class="z-20" v-html="output" />
    <textarea
      v-model="input"
      class="code-input text-area-border font-mono bg-transparent absolute inset-0 py-1 px-2 text-transparent resize-none z-10"
      autocomplete="off"
      autocorrect="off"
      autocapitalize="off"
      spellcheck="false"
      @input.once="$emit('answerAnswer')"
    />
  </div>
</template>

<style scoped>
.code-input {
  /* 光标 */
  caret-color: #9ca3af;
  /* tab size */
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
}

.text-area-border {
  border-style: solid;
  border-color: #ccc;
  border-width: 2px;
}
</style>
